<template>
    <div class="shopList">
        <div class="shopList_top">
		    <div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">平台商品列表<i class="el-icon-close"></i></div>
		</div>
        
        <div class="shopList_bottom">
            <div class="new">
                <div class="shopList">
                    <div class="shopList_serch">
                        <div class="shopClass">
                            <el-button type="primary" style="margin-right:20px;" @click="addShop">添加商品</el-button>
                            <span>商品分类</span>
                            <div class="block">
                                <el-cascader
                                v-model="value"
                                :props="cate"
                                clearable
                                :options="cateList"
                                @change="handleChange"></el-cascader>
                            </div>
                        </div>
                        <div class="shopList_serch_ipt">
							<!-- <el-input v-model="storeName" placeholder="请输入店铺名称查询"></el-input> -->
							<el-input v-model="shopName" clearable placeholder="请输入商品名称查询"></el-input>
							<el-button  @click="handerSeach" @keyup.enter.native="handerSeach"><i class="el-icon-search"></i>搜索</el-button>
							<!-- <button class="refresh" @click="handerRefresh"><i class="el-icon-refresh"></i>复原</button> -->
						</div>
                    </div>
                </div>
            </div>
			<el-tabs v-model="activeName" @tab-click="handleClick" style="padding:0 20px;">
				<el-tab-pane label="家居" name="1"></el-tab-pane>
				<el-tab-pane label="泛家居" name="2"></el-tab-pane>
			</el-tabs>
            <!-- 表格 -->
            <div class="shopList_table" >
                <div class="shopList_bottom_table">
                <table>
                    <tr>
                        <th></th>
                        <th>序号</th>
                        <th>商品名</th>
                        <th>销售价格</th>
                        <th>分销价</th>
                        <th>销量</th>
                        <th>库存</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(v,i) in tableList" :key="i">
                        <td>
                            <font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}" @click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
                        </td>
                        <td>{{v.product_id}}</td>
                        <td>{{v.product_title}}</td>
                        <td>{{v.price}}</td>
                        <td>{{v.rate_price}}</td>
                        <td>{{v.volume?v.volume:0}}</td>
                        <td>{{v.num}}</td>
                        <td>{{v.platform_status==1?'上架':v.platform_status==0?'下架':''}}</td>
                        <td>
                            <button class="delete" style="margin-right:10px;" @click="toDelShop(v.product_id)">删除</button>
                            <button class="editor" @click="toDetail(v.product_id,v.store_id)">详情</button>
                            <button v-if="v.platform_status" :class="v.platform_status==1?'delete':'check_active'" @click="toShelf(v.product_id,v.platform_status)">{{v.platform_status==1?'下架':'上架'}}</button>
                        </td>
                    </tr>
                    <tr v-if="tableList.length == 0"><td class="table_title" colspan="15">当前数据空空如也</td></tr>
                </table>
                
                   <!-- 全选与分页 -->
                <div class="shopList_bottom_page">
                    <div class="shopList_bottom_page_left">
                        <div class="shopList_bottom_page_left_checkAll" @click="handerCheckAll">
                            <font class="checkbox" :class="{'check_active' : checkAll}"><i class="el-icon-check"></i></font>
                        </div>全选
                        <!-- <button class="shopList_bottom_page_left_btn" @click="selectDel">删除</button> -->
                    </div>
                    <div class="shopList_bottom_page_right">
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total"
                            background>
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
        </div>

        <!-- 添加商品弹出框 -->
        
        <el-dialog
            title="添加商品"
            :visible.sync="dialogVisible_shop"
            @closed="closedFn_shop"
            width="50%">
            <div class="houseHoldBox">
                <div class="inputBox">
					<div class="sub-title">选择商品</div>
                    <el-input type="text" v-model="shopInput" @blur="changeInput" clearable placeholder="请输入商品名"></el-input>
                    <el-button type="primary" @click="searchShop">搜索</el-button>
                </div>
				
				<div class="inputBox input-space">
				 <div class="sub-title">当前售价</div> <el-input type="text" v-model="price" @blur="changeInput" disabled="true" clearable placeholder="当前售价"></el-input>
				</div>
				<div class="inputBox input-space">
				   <div class="sub-title">设置分销价格</div> <el-input type="text" v-model="rate_price" @blur="changeInput" clearable placeholder="设置选择商品的分销价格"></el-input>
				</div>
                <div class="shopBox">
                    <div class="item" v-for="(item,index) in shopList" :key="index"  @click="productSelect(item.price,item.primary_price)">
                        <el-radio v-model="shopRadio" :label="item.product_id">
                            <div class="radioBox">
                                <img :src="item.main_imgurl" mode="" />
                                <div class="title">{{item.product_title}}</div>
                            </div>
                        </el-radio>
                    </div>
                    <div class="openMore" v-if="shopList.length" @click="moreBtnHold">{{moreText}}</div>
                </div>
                <div class="notList" v-if="searchShopList">暂无数据~</div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible_shop = false">取 消</el-button>
                <el-button type="primary" @click="addShopConfirm">确 定</el-button>
            </span>
        </el-dialog>

       <!-- 预览手机 --> 
        <div class="modal fade in" tabindex="-1" style="padding-right: 17px;" v-if="deatilpop" @click="deapop">
            <div class="modal-dialog" style="width: 413px;">
                <div class="fe-phone">
                    <div class="fe-phone-left"></div>
                    <div class="fe-phone-center">
                        <div class="fe-phone-top"></div>
                        <div class="fe-phone-main">
                            <div class="deatil">
                              <div class="block">
                                    <el-carousel trigger="click" height="300px">
                                        <el-carousel-item v-for="(item,index) in  datadeatil.round_imgs" :key="index">
                                            <h3 class="small"><img width="100%" :src="item.image_path"/></h3>
                                        </el-carousel-item>
                                    </el-carousel>
                                </div>
                              <!-- 商品基础信息 -->
                            <div class="g_base">
                                <div>
                                    <div class="g_bSell">库存:{{datadeatil.num}}</div>
                                    <div class="g_bPrice"><div class="ledtprei">￥<i>{{datadeatil.price}}</i></div><div class="ledtprei2">￥<i>{{datadeatil.primary_price}}</i></div></div>
                                </div>
                                <div>
                                    <div class="g_bName omit-2">{{datadeatil.product_title}}</div>
                                </div>
                            </div>
                        
                            <div class="g_it">
                                <div class="g_iGroup">
                                    <div class="g_iItem">
                                        <div class="g_iLabel">选择</div>
                                        <div class="g_iCont">
                                            <div class="g_iIcon"><img src="../../../assets/icon_more.png" /></div>
                                            <div class="g_iTxt">规格分类</div>
                                            <div class="g_iSelect" v-if="datadeatil.sku_lst">
                                                <div style="display: flex; overflow-x: auto; width: 50%;">
                                                    <div style="display: flex;">
                                                        <div class="g_isItem" v-for="(itme,index) in datadeatil.sku_lst" :key="index"><img :src="datadeatil.round_imgs[0].image_path" /></div>
                                                    </div>
                                                </div>
                                                <div class="g_isLabel">共有{{datadeatil.sku_lst.length}}种规格分类可选</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 商品详情 -->
                            <div class="g_detail">
                                <div class="g_dTitle">商品详情</div>
                                <div class="g_dTitles" v-html="textDetails" >
                                    
                                </div>
                            </div>
                            </div>
                        </div>
                        <div class="fe-phone-bottom" style="overflow:hidden;">
                            <div style="height:52px; width: 52px; border-radius: 52px; margin:20px 0px 0px 159px; cursor: pointer;" data-dismiss="modal" aria-hidden="true" title="点击关闭"></div>
                        </div>
                    </div>
                    <div class="fe-phone-right"></div>
               </div>
           </div>
       </div>
       

    </div>
</template>

<script>
export default {
    data(){
        return{
            storeName:'', //店铺名称搜索
            shopName:'',  //商品名称搜索
            tableList:[{}],
            checkAll:false,
			page:1,
			pageSize:10,
			total:0,
            checkBoxAll:[],				// 选中的数据
			shelvesAlls:[],
            cateList:[],
            value:[],
			cate:{
				value: 'cate_id',
				label: 'cate_name',
				children: 'child',
				expandTrigger: 'hover'
			},
            deatilpop:false,
            datadeatil:'',
            textDetails: "",
            activeName:'1',

            dialogVisible_shop:false,
            pageShop:1,
            pagesizeShop:10,
            shopInput:'',
            shopList:[],
            shopRadio:'',
            moreText:'点击加载更多',
            searchShopList:false,
			rate_price:'',
			price:'',//售价
			primary_price:'',//原价
        }
    },
    created() {
        this.keyupEnter()
    },
    mounted() {
        let backPage = this.$route.query.page;
            if(backPage){
                this.page = Number(backPage)
            }
        this.storeName = this.$route.query.storeName;
        this.shopName = this.$route.query.shopName;
        console.log(this.page);
        console.log(this.storeName);
        console.log(this.shopName);
        this.getShopList()
        this.getCateList()
    },
    
    methods:{
        // 添加按钮
        addShop(){
            this.dialogVisible_shop = true
        },
        // 添加商品弹出框搜索按钮
        searchShop(){
            if(this.shopInput==''){
                this.$message.warning('请输入商品名')
                return
            }
            this.moreText = '点击加载更多'
            this.searchShopList = false
            this.pageShop = 1
            let params = {
                keyword:this.shopInput,
                page:this.pageShop,
                pagesize:this.pagesizeShop
            }
            this.$http.post('/api/root/ProductHot/search',params).then(res=>{
                console.log(res,'添加商品');
                if(res.code==1){
                    if(!res.data.products.length){
                        this.searchShopList = true
                    }
                    if(res.data.products.length<10){
                        this.moreText = '没有更多了~'
                    }
                    this.shopList = res.data.products?res.data.products:[]
                }
            })
        },
        // shiqu 焦点
        changeInput(){

        },
        // 点击加载更多
        moreBtnHold(){
            this.pageShop++
            let params = {
                keyword:this.shopInput,
                page:this.pageShop,
                pagesize:this.pagesizeShop
            }
            this.$http.post('/api/root/ProductHot/search',params).then(res=>{
                console.log(res,'添加商品');
                if(res.code==1){
                    if(!res.data.products.length){
                        this.moreText='没有更多了~'
                    }
                    this.shopList = this.shopList.concat(res.data.products)
                }
            })
        },
        // 弹出框确定
        addShopConfirm(){
            if(this.shopRadio==''){
                this.$message.warning('请选择要添加的商品')
                return
            }
			if(this.rate_price==''){
			    this.$message.warning('请填写分销价格')
			    return
			}
			if(parseFloat(this.rate_price)>parseFloat(this.price)){
				this.$message.warning('分销价格不能大于售价')
				return false;
			}
			if(parseFloat(this.rate_price)>parseFloat(this.primary_price)){
				this.$message.warning('分销价格不能大于原价')
				return false;
			}
            let params = {
                product_id:this.shopRadio,
				rate_price:this.rate_price
            }
            this.$http.post('/api/root/platform/product/add',params).then(res=>{
                console.log(res,'添加商品结果');
                if(res.code==1){
                    this.$message.success('添加成功')
					this.rate_price='';
					this.price='';
                    this.dialogVisible_shop = false;
                    this.getShopList()
                }else{
                    this.$message.warning(res.msg)
                }
            })
        },
        // 关闭弹出框回调
        closedFn_shop(){
            this.shopRadio = ''
            this.shopList = []
            this.shopInput = ''
            this.searchShopList = false
            this.moreText = '点击加载更多'
        },

        // 删除商品
        toDelShop(id){
            this.$confirm('确定要删除该商品吗？','提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                this.$http.post('/api/root/platform/product/del',{id_lst:id}).then(res=>{
                    console.log(res,'删除结果');
                    if(res.code==1){
                        this.$message.success('删除成功')
                        this.getShopList()
                    }else{
                        this.$message.warning(res.msg)
                    }
                })
            }).catch(()=>{})
        },

        toDetailpop(id){
         this.$http
          .post("/api/root/ProductShop/detail", { product_id: id })
          .then(res => {
              if(res.code == 1){
                  this.datadeatil = res.data
                  this.textDetails = res.data.details
                  this.checkImg(this.textDetails)
                  this.deatilpop = true
              }
          })
        },
         checkImg(contents) {
            this.textDetails = contents.replace( /\<img/gi, '<img style="width:100%;max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
         },
        deapop(){
          this.deatilpop = false
        },
        // 获取商品列表
        getShopList(){
            let cate_id = this.value
            let params = {
                page:this.page,
                pagesize:this.pageSize,
                keyword:this.shopName,
                cate_id,
                // store_id
                // store:this.storeName,
                sale_type:this.activeName,//1家居，2泛家居
            }
            this.$http.post('/api/root/platform/product/list',params).then(res=>{
                console.log(res);
                if(res.code==1){
                    this.tableList = res.data.products
                    this.total = res.data.total
                }
            })
            
        },

        // tab切换
        handleClick(){
            this.value = ''
            this.getShopList()
            this.getCateList()
        },

        // 回车
        keyupEnter(){
            document.onkeydown = e =>{
                let body = document.getElementsByTagName('body')[0]
                if (e.keyCode === 13 && e.target.baseURI.match('/shopList') && e.target === body) {
                    console.log('enter') // match(此处应填写文件在浏览器中的地址，如 '/home/index')
                    this.handerSeach()
                }
            }
        },

        //获取分类
        getCateList(){
            this.$http.get('/api/root/Cate/cateLst',{sale_type:this.activeName}).then(res => {
				console.log(res);
                if(res.code == 1) {
					this.cateList = res.data;
				}
			});
        },

        // 列表更改分类
        changeCate(product_id,e){
            console.log(e);
            let cate_id = e[e.length-1]
            this.$http.post('/api/root/ProductShop/editCate',{product_id,cate_id}).then(res=>{
                if(res.code==1){
                    // console.log(this.$refs.cascader);
                    this.getShopList()
                    this.$message.success('修改成功')
                }
            })
        },

        // 更改酷品秀
        changeCoolShow(product_id,cool_id){
            console.log(product_id,cool_id,'酷品秀');
            let params = {
                product_id,
                cool_show:cool_id?cool_id:''
            }
            this.$http.post('/api/root/ProductShop/editCoolShow',params).then(res=>{
                console.log(res,'酷品秀修改结果');
                if(res.code==1){
                    this.$message.success('操作成功')
                }else{
                    this.$message.warning(res.msg)
                }
            })
        },

        // 商品上下架
        toShelf(id,sta){
            let status = sta==1?0:1
            this.$http.post('/api/root/platform/product/status',{id_lst:id,status}).then(res=>{
                if(res.code==1){
                    this.getShopList()
                    if(status==1){
                        this.$message.success('上架成功')
                    }else{
                        this.$message.success('下架成功')
                    }
                }
            })
        },

        // 
        remove(e){
            console.log(e);
            
        },

        // 筛选
		handleChange(e){
			// console.log(e);
			this.value = e[e.length - 1];
            this.page=1
            this.getShopList()
		},

        //点击搜索
        handerSeach(){
            this.page=1
            this.getShopList()
        },

        // 点击复原
        handerRefresh(){
            this.page=1
            this.storeName='';
            this.shopName='';
            this.value = '';
            this.activeName='1';
            this.getShopList()

        },

        //点击详情
        toDetail(id,store_id){
            let page = this.page
            let storeName = this.storeName
            let shopName = this.shopName
            this.$router.push({name:'productLibraryDetail',query:{id,store_id,page,storeName,shopName}})
        }, 

         // 多选
			handlerCheckbox(i){
                console.log(i);
				let arr = this.checkBoxAll;
				if(arr.includes(i)){
					let index = arr.indexOf(i);
					if(index > -1){
						arr.splice(index,1);
						if(this.checkBoxAll.length !== this.tableList.length) {
							this.checkAll = false;
						}
					}
				}else {
					this.checkBoxAll.push(i);
					if(this.checkBoxAll.length == this.tableList.length) {
						this.checkAll = true;
					}
				};
				this.shelvesAlls.push(this.tableList[i].product_id);
			},
            // 全选与全不选
			handerCheckAll(){
				this.checkAll = !this.checkAll;
				let arr = this.tableList.length;
				this.checkBoxAll = [];
				if(this.checkAll){
					for(let i=0;i<arr;i++){
						this.checkBoxAll.push(i);
					}
				}else {
					this.checkBoxAll = [];
				}
				// 去重
				let res = this.checkBoxAll;
				for(let i=0;i<res.length;i++){
					for(let j=i+1;j<res.length;j++) {
						if(res[i] == res[j]) {
							res.splice(j,1);
							j--;
						}
					}
				};
                this.checkBoxAll.map(v => {
					return this.shelvesAlls.push(this.tableList[v].store_id.toString());;
				})
			},

        // 全选删除
        // selectDel(){},

        //分页
        	handleSizeChange(val) {
				this.pageSize = val;
				this.getShopList(this.shopName,this.value,this.storeName)
			},
			handleCurrentChange(val) {
			    this.page = val;
				this.getShopList(this.shopName,this.value,this.storeName)
			},
         productSelect(price,primary_price){
			 this.price=price;
			 this.primary_price=primary_price;
		 } 
    }
}
</script>

<style lang="less" scoped>
@import 'list.less';
</style>

